<template>
    <div>
        <div id="vditor" class="vditor-box"></div>
    </div>
</template>

<style lang="scss" scoped>
.vditor-box {
    width: 100%;
    height: 100%;
}
</style>

<script>
import Vditor from "vditor";
import "vditor/dist/index.css";
export default {
    name: "MDEditor",
    props: {
        value: {
            default: "",
        },
    },
    data() {
        return {
            editor: "",
        };
    },
    created() {},
    mounted() {
        this.content = this.value;
        this.editor = new Vditor("vditor", {
            cdn: "/vditor",
            hint: {
                emojiPath: "/vditor/dist/images/emoji",
            },
            width: "100%",
            mode: "sv",
            toolbarConfig: {
                pin: true,
            },
            counter: {
                enable: true,
            },
            cache: {
                enable: false,
            },
            preview: {
                hljs: {
                    style: "dracula",
                    lineNumber: true,
                },
            },
            upload: {
                url: $A.apiUrl("system/fileupload"),
                linkToImgUrl: $A.apiUrl("system/imgupload"),
                accept: "image/*,video/*,audio/*,application/*",
                headers: {
                    token: $A.getToken(),
                },
                fieldName: "files",
                multiple: false,
                format: (files, resp) => {
                    const json = JSON.parse(resp)
                    const result = {
                        msg: json.msg,
                        code: json.ret === 1 ? 0 : 1,
                        data: {
                            succMap: {
                                [json.data.name]: json.data.url,
                            },
                        },
                    };
                    return JSON.stringify(result);
                },
            },
            after: () => {
                this.editor.setValue(this.content);
            },
            input: (value) => {
                this.$emit("input", value);
            },
        });
    },
};
</script>
